<route lang="json5">
{
  meta: {
    auth: true,
  },
}
</route>

<template>
  <div class="h-full w-full p-24">
    <div class="box grid grid-cols-3 gap-2 w-max">
      <div class="box-item w-24 h-24" v-for="item in 9"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { gsap } from 'gsap'

const COLORS = ['#FFC0CB', '#98FF98', '#ADD8E6', '#FFFAFA', '#FFFFE0', '#D3D3D3', '#FF7F50', '#E6E6FA', '#90EE90']
const SIZE = 96
const GAP = 8
onMounted(async () => {
  const t = gsap.timeline()
  t.fromTo(
    '.box-item',
    {
      opacity: 0,
      scale: 0.3,
      x: (i) => -1 * (SIZE + GAP) * (i % 3),
      y: (i) => -1 * (SIZE + GAP) * Math.floor(i / 3),
      backgroundColor: '#F3F4F6',
    },
    {
      opacity: 1,
      scale: 1,
      x: 0,
      y: 0,
      duration: 1,
      backgroundColor: (i) => COLORS[i],
      stagger: {
        from: [0, 0],
        grid: [3, 3],
        amount: 2,
      },
    },
  )
    .to(
      '.box',
      {
        css: {
          transform: 'rotateY(30deg) rotateZ(-5deg)',
        },
        duration: 3,
      },
      '<',
    )
    .to('.box', {
      duration: 1,
      rotateY: 390,
    })
    .to(
      '.box-item',
      {
        x: (i) => (1 - (i % 3)) * -60,
        y: (i) => (1 - Math.floor(i / 3)) * -60,
        duration: 0.5,
        ease: 'none',
      },
      '>-=0.5',
    )
    .to(
      '.box-item',
      {
        rotate: 90 + 360 * 2,
        // ease: "elastic.out(1, 0.1)",
        duration: 2,
      },
      '<+=0.5',
    )
    .to(
      '.box-item',
      {
        height: 40,
        width: 40,
        duration: 1,
      },
      '>-=0.5',
    )
    .to('.box-item', {
      x: 0,
      y: 0,
      rotate: 0,
      duration: 2,
      borderRadius: 5,
      ease: 'back.out(6)',
    })
    .to(
      '.box',
      {
        css: {
          transform: 'rotateY(0deg) rotateZ(0deg)',
        },
        duration: 1,
      },
      '<',
    )
    .fromTo(
      '.box-item',
      {
        scale: 3,
        zIndex: 2,
      },
      {
        scale: 1,
        zIndex: 1,
        duration: 1,
        stagger: {
          from: 'random',
          grid: [3, 3],
          amount: 2,
        },
      },
    )

    .to(
      '.box-item',
      {
        rotate: 720,
        duration: 1,
        stagger: {
          from: 'random',
          grid: [3, 3],
          amount: 2,
        },
      },
      '<',
    )
    .to(
      '.box',
      {
        duration: 1,
        scale: 2,
        repeat: 1,
        yoyo: true,
      },
      '>-=0.5',
    )
    .to(
      '.box',
      {
        css: {
          transform: 'rotateY(30deg) rotateZ(-210deg)',
        },
        duration: 2,
      },
      '<',
    )
    .to(
      '.box-item',
      {
        height: SIZE,
        width: SIZE * 1.2,
        rotateZ: 210,
        duration: 1,
      },
      '<-=0.5',
    )
    .play()
})
</script>
